/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    TextInput,
    TouchableOpacity,
    Alert,
    ScrollView,
    Platform,
    NativeModules
} from 'react-native';
import NavigationBar from '../components/NavigationBar'
const {height, width} = Dimensions.get('window');
import registerService from '../lib/services/registerService';
var CryptoJS = require("crypto-js");
var KEY = CryptoJS.enc.Utf8.parse('KSUOQP54S6A7Q9A2');
export default class zhuce extends Component {
	constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            phone:'',
            passWord:'',
            rePassWord:'',
            code:'',
            canClick:true,
            num:'60',
            title:this.props.navigation.state.params.title,

        };
        this.timer=null;
    }
    render() {
        return (
            <View style={styles.container}>
                <NavigationBar 
                    titleText={this.state.title}
                    leftStyle={{tintColor:"#fff"}}
                    rightStyle={{tintColor:"#fff",marginRight:15}}
                    leftIcon = 'left'
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    <View style={styles.denglu}>
                        <View style={styles.shouji}>
                            <Image style={styles.img1} source={require('../img/icon/phone.png')}/>
                            <TextInput onChangeText={(text)=>this.zhux(text)}
                                style={{width:200,marginLeft:10,}} 
                                selectionColor={'rgb(79,145,237)'} 
                                underlineColorAndroid="transparent" 
                                placeholder="请输入手机号" 
                                onChangeText={(text) => this.setState({phone:text})}/>
                        </View>
                        <View style={styles.shouji}>
                            <Image style={styles.img1} source={require('../img/icon/password.png')}/>
                            <TextInput 
                                onChangeText={(text)=>this.zhuC(text)}
                                style={{width:200,marginLeft:10,}} 
                                selectionColor={'rgb(79,145,237)'} 
                                underlineColorAndroid="transparent" 
                                placeholder="输入密码" 
                                onChangeText={(text) => this.setState({passWord:text})}
                                secureTextEntry={true}/>
                        </View>
                        <View style={styles.shouji}>
                            <Image style={styles.img1} source={require('../img/icon/password.png')}/>
                            <TextInput 
                                onChangeText={(text)=>this.zhuC(text)} 
                                style={{width:200,marginLeft:10,}} 
                                selectionColor={'rgb(79,145,237)'}  
                                underlineColorAndroid="transparent" 
                                placeholder="确认密码" 
                                onChangeText={(text) => this.setState({rePassWord:text})}
                                secureTextEntry={true}/>
                        </View>
        	            <View style={styles.shouji}>
                            <Image style={styles.img1} source={require('../img/icon/icon_code.png')}/>
                            <TextInput 
                                onChangeText={(text)=>this.zhuy(text)} 
                                style={{flex:1,marginLeft:10,}} 
                                selectionColor={'rgb(79,145,237)'} 
                                underlineColorAndroid="transparent" 
                                placeholder="请输入验证码" 
                                onChangeText={(text) => this.setState({code:text})}/>
                            <TouchableOpacity onPress={()=>this.getCode()}>
                				<View style={styles.jishi}>
                					<Text style={{color:'#fff',fontSize:12}}>{this.state.canClick?'获取验证码':(this.state.num+'s后重发')}</Text>
                				</View>
              				</TouchableOpacity>
        	            </View>
                    </View>
                    <View style={{marginTop:50,paddingLeft:10,paddingRight:10}}>
                        <TouchableOpacity onPress={()=>this.bottomBtn()}>
                            <View style={styles.anniu}>
                                <Text style={{color:'#fff'}}>{this.state.title=='注册'?'注册':'确定'}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        );
    }
    goBack(){
        clearTimeout(this.timer);
        this.timer = null;
        this.props.navigation.goBack();
    }
    sendCode(){
        if(this.state.canClick){
            this.setState({
                canClick:false
            })
            this.changeNum();
        }
    }


    changeNum(){
        var $this = this;
        var number = parseInt(this.state.num);
        var aa = (number-1);
        clearTimeout(this.timer);
        this.timer = null;
        this.timer = setTimeout(function(){
            if(aa==0){
                $this.setState({
                    num:'60',
                    canClick:true
                })
                return;
            }else{
                $this.setState({
                    num:(aa+'')
                })
            }
            
            $this.changeNum()
        },1000)
        
    }

    async getCode(){
        var $this = this;
        var aesPhone = '';
        
        aesPhone=await CryptoJS.AES.encrypt($this.state.phone, KEY, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
        var num = aesPhone.toString();
        console.log(num)
        
        if(!/^1[3578][0-9]{9}$/.test(this.state.phone)){
            alert('请输入正确的手机号！');
            return;
        }
        var type = this.state.title=='注册'?1:2;
        registerService.getCode(function(data){
            alert(JSON.stringify(data));
            if(data.code==10000){
                // alert('验证码发送成功！')
                $this.sendCode();
            }else{
                // alert('验证码发送失败！')
            }
        },num,type)
    }

    pand(){
        var re = /^1[3578][0-9]{9}$/;
	    if(re.test(this.state.phone)){
	    
        }else{
	        alert('请输入正确手机号')
	    }
    }
	pands(){
		var zh =  /([a-zA-Z0-9!@#$%^&*()_?<>{}]){8,18}/;
		if(zh.test(this.state.passWord)){
		      
		}else{
		    alert('请输入正确密码')
		}
		   
	}
    pan(){
        var zx = /[0-9]+/;
        if(zx.test(this.state.code)){
       
        }else{
            alert('请输入正确验证码')
        }
    }
	bottomBtn(){
        var $this = this;
        if(!/^1[3578][0-9]{9}$/.test(this.state.phone)){
            alert('手机号格式不正确！');
            return;
        }else if(!/([a-zA-Z0-9!@#$%^&*()_?<>{}]){6,18}/.test(this.state.passWord)){
            alert('密码格式不正确！');
            return;
        }else if(this.state.passWord!=this.state.rePassWord){
            alert('两次密码输入不一致！');
            return;
        }else if(!/^\d+$/.test(this.state.code)){
            alert('验证码格式不正确！');
            return;
        }
        if(this.state.title=='注册'){
            registerService.register(function(data){
                alert(JSON.stringify(data));
                if(data.code==10000){
                    Alert.alert(
                        '提示信息',
                        '注册成功',
                        [{text: '确定', onPress: () => $this.goBack()}])
                }
            },$this.state.phone,$this.state.passWord,$this.state.rePassWord,$this.state.code,'123456789',2)
        }else{
            registerService.forgetPassword(function(data){
                // alert(JSON.stringify(data));
                if(data.code==10000){
                    Alert.alert(
                        '提示信息',
                        '修改成功',
                        [{text: '确定', onPress: () => $this.goBack()}])
                }
            },$this.state.phone,$this.state.passWord,$this.state.rePassWord,$this.state.code)
        }
	    
	}
	   
}
const styles = StyleSheet.create({
    container:{
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    },
    denglu:{
        backgroundColor:"#fff",
        marginTop:12,
        marginLeft:12,
        marginRight:12,
        borderRadius:10,
      
    },
    shouji:{
        borderBottomWidth:1,
        borderColor:"#eee",
        marginLeft:10,
        marginRight:10,
        flexDirection:"row",
    },
    img1:{
        width:24,
        height:24,
        marginTop:12,
    },
    anniu:{
    	flexDirection:"row",
    	backgroundColor:'rgb(79,145,237)',
    	height:40,
    	justifyContent:'center',
    	alignItems:'center',
    	borderRadius:10,
    },
    jishi:{
    	flexDirection:"row",
    	height:30,
    	justifyContent:'center',
    	alignItems:'center',
    	backgroundColor:'rgb(79,145,237)',
    	borderRadius:10,
    	width:80,
    	marginTop:10
    },

});
